<template>
  <div class="LineChart chart" ref="el" style="width: 100%;height: 300px;"></div>
</template>

<script setup>
import { ref, nextTick, onMounted, onBeforeUnmount, watch } from 'vue'
import useResizeHook from "../hooks/useResizeHook.js"
import * as echarts from 'echarts'
import "echarts/theme/azul" // echarts theme

const props = defineProps({
  chartData: {
    type: Object,
    default: {},
    required: true,
  }
})
const el = ref(null)

let chart = null

const useResize = useResizeHook(chart)

watch(
  () => props.initChart,
  () => initChart(),
  {
    deep: true
  }
)

onMounted(() => {
  nextTick(() => initChart())
})

onBeforeUnmount(() => {
  if (!chart) return
  chart.dispose()
  chart = null
})

function initChart() {
  chart = echarts.init(el.value, 'azul')
  chart.setOption({
    title: {
      text: 'Stacked Line'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: props.chartData.map(v => v.name)
    },
    grid: {
      left: '5%',
      right: '3%',
      bottom: '12%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: {
      // type: 'value'
    },
    series: props.chartData
  });
}
</script>

<style>
</style>